<template>
  <!-- 查询区域 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="132px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '150px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <!-- 有些系统是4个字 -->
        <a-col flex="130px">
          <a-form-item label="类型" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              placeholder="全部"
              v-model:value="queryParam.ywlx"
              dictCode="ywlxType"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :showArrow="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="285px">
          <a-form-item label="日期" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ style: { width: '245px' } }">
            <a-date-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 109px; padding: 4px;"
            /> ~
            <a-date-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 109px; padding: 4px;"
            />
          </a-form-item>
        </a-col>

        <a-col flex="118px">
          <a-form-item label="状态" :label-col="{ style: { width: '40px' } }" >
            <a-select v-model:value="queryParam.ddzt" placeholder="全部" :showArrow="false" :allowClear="true" :dropdown-match-select-width="90">
              <a-select-option value="0">待确认</a-select-option>
              <a-select-option value="1">已确认</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="143px">
          <a-form-item label="操作人" :label-col="{ style: { width: '52px' } }">
            <JDictSelectTag
              v-model:value="queryParam.userIds"
              mode="multiple"
              dictCode="sys_user,realname,id@authUser"
              placeholder="全部"
              :maxTagCount="0"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :allowClear="true"
              :showSearch="true"
            />
          </a-form-item>
        </a-col>

        <a-col flex="152px">
          <a-form-item label="订单" :label-col="{ style: { width: '40px' } }">
            <a-input placeholder="" v-model:value="queryParam.orderId" @blur="cheangeOrderId()"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="115px">
          <a-form-item label="名称" :label-col="{ style: { width: '40px' } }">
            <a-input placeholder="" v-model:value="queryParam.travelLine"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="70px">
          <a-form-item label="未收" :label-col="{ style: { width: '40px' } }">
            <a-checkbox :aria-checked="queryParam.wskchecked" @change="changeWskchecked"></a-checkbox>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!--引用表格 :rowSelection="rowSelection"-->
  <BasicTable @register="registerTable" :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName" :loading="loading">
    <!--插槽:table标题-->
    <template #tableTitle>
      <a-button type="primary" color="success" preIcon="ant-design:plus-outlined" @click="handleCreate">新增</a-button>
      <a-button type="primary" color="warning" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出 </a-button>
      <a-button type="primary" color="error" preIcon="ant-design:delete-twotone" @click="handleDelete" v-auth="'business:delete'"> 删除空订单 </a-button>
    </template>
  </BasicTable>
  <!-- table区域-end v-auth="'business:delete'"-->

  <BusinessAdd @register="registerBusinessAdd" @success="handleSuccess"></BusinessAdd>
  <BusinessOrder @register="registerBusinessOrder" @success="reload"></BusinessOrder>

  <AccountModal @register="registerAccount" ></AccountModal>
</template>

<script lang="ts" setup name="business-list">
import { ref, unref, reactive, toRaw, onMounted } from "vue";
import { BasicTable } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { businessDelete, list } from "./business.api";
import { columns } from "./business.data";
import { momentSearchQueryDate } from "/@/utils/dateUtil";
import { replaceAll } from "/@/utils";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import BusinessAdd from './BusinessAdd.vue';
import BusinessOrder from './BusinessOrder.vue';
import AccountModal from './AccountTest.vue';

// 自动请求并暴露内部方法
onMounted(() => {
  //console.info("onMounted@@", moment().valueOf)
});

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  ddlxIds: [],
  ywlx: '',
  beginDate : momentSearchQueryDate('sub'),
  endDate: momentSearchQueryDate('add'),
  wskchecked: false,
});

//限制查询日期，开始日期不能大于结束日期
function disabledStartDate(beginDate) {
  const endDate = queryParam.endDate;
  if (!beginDate || !endDate) {
    return false;
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.beginDate;
  if (!endDate || !beginDate) {
    return false;
  }
  return moment(beginDate).valueOf() > endDate.valueOf();
}
//初始化 -------------------------------------------------------------

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function searchReset() {
  Object.assign(queryParam, {ddlxIds: '', ddzt: '', ywlx: ''});
}

function handleSummary(tableData: Recordable[]) {
  const res = getRawDataSource()
  redoHeight();
  if (res) {
    return getRawDataSource().summary;
  } else {
    return [];
  }
}

function changeWskchecked(e) {
  queryParam.wskchecked = e.target.checked;
}

// 列表页面公共参数、方法
const loading     = ref<boolean>(false);
const dataSource  = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
  designScope: 'business-list',
  tableProps: {
    rowKey: '(row) => row.id',
    api: list,
    columns: columns,
    showIndexColumn: true,    //行号
    clickToRowSelect: true,   //点击选择
    showActionColumn: false,
    useSearchForm: false,
    showSummary: true,
    summaryFunc: handleSummary,
    beforeFetch: (params) => {Object.assign(params, unref(queryParam))}, 
  },
})

//注册table数据
const [registerTable, {reload, setProps, getRawDataSource, redoHeight}] = tableContext

//新增订单
const [registerBusinessAdd, {openModal: openBusinessAdd}] = useModal();
/**
 * 新增事件
 */
function handleCreate() {
  openBusinessAdd(true, { isUpdate: false, });
}

/**
 * order 订单新增后回调函数,自动弹出订单编辑窗口
 * @param businessId
 */
function handleSuccess(businessId) {
  openBusinessOrder(true, {id: businessId, buttonAll: true});
  reload();
  selectRows.id = '';
}

//详细订单
const [registerBusinessOrder, {openModal: openBusinessOrder}] = useModal();
//双击行
function handleDblclick(record) {
  openBusinessOrder(true, {id: record.id, buttonAll: true});
}

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

/**
 * 删除事件
 */
async function handleDelete() {
  if (!selectRows.id && selectRows.id != null) {
    alert('请选择数据。');
    return;
  }

  await businessDelete({id: selectRows.id}, reload)
}

/**
 * 收支项目 注册弹出编辑窗口
 * 作者：qdl
 * 日期：2022-07-04
 */
const [registerAccount, { openModal: accountModal }] = useModal();

function cheangeOrderId() {
  let text = queryParam.orderId;
  if (!text) {
    return false;
  }
  if (text.split("-").length > 0) {
    text = replaceAll(text, " ", "");
    text = replaceAll(text, "\t", "");
    queryParam.orderId = replaceAll(text, "-", "")
  }
  if (queryParam.orderId.length > 8) {
    queryParam.orderId = queryParam.orderId.substr(0,8) + '-' + queryParam.orderId.substr(8,queryParam.orderId.length+1)
  }
}
</script>
<style lang="less" scoped>

</style>
